<template>
  <view>
    <!-- 列表 -->
    <view class="cart-list">
      <!-- 列表项 -->
      <u-swipe-action   
			v-for="(item,index) in cartList" :key="item.goods_id"
      :index="index"
      :show="item.show"
			@click="click" @open="open"
			:options="options"
      btn-width="180"
		>
      <view class="cart-item">
        <!-- 单选框 -->
        <view class="cart-check">
          <!-- <checkbox :checked="item.checked"></checkbox> -->
          <u-checkbox
          :value="item.checked"
        shape="circle"
        active-color="red"
        size="35"
        @change="handleItemCheck(index)"
        ></u-checkbox>
        </view>
        <!-- 图片 -->
        <view class="cart-img">
          <u-image width="191rpx" height="191rpx" :src="item.goods_small_logo"></u-image>
        </view>
        <view class="title-wrap">
					 <!-- 商品信息 -->
        <view class="cart-info">
          <view class="cart-info-name u-line-2">{{item.goods_name}}</view>
          <!-- 信息工具 -->
          <view class="cart-info-tool">
            <!-- 价格 -->
            <view class="cart-info-tool-price">￥{{item.goods_price}}</view>
            <!-- 数量加减 -->
            <view class="cart-info-tool-count">
              <view class="btn" @click="handleNumChange(index,-1)">-</view>
              <view class="count">{{item.num}}</view>
              <view class="btn" @click="handleNumChange(index,1)">+</view>
            </view>
          </view>
        </view>
				</view>
       
      </view>
      </u-swipe-action>
    </view>
    <!-- 统计栏 -->
    
    <view class="statistics">
      <!-- 全选-->
      <view class="all-chk">
        <u-checkbox
        :value="isSelectAll"
        shape="circle"
        active-color="red"
        size="35rpx"
        @change="handleSelectAll"
        >全选</u-checkbox>
      </view>
      <!-- 合计 -->
      <view class="total">
        合计:
        <text class="rmb">￥</text>
        <!-- 价格 -->
        <text class="price">{{totalPrice}}</text>
      </view>
      <!-- 结算按钮 -->
      <u-button @click="hangdleGoPay" type="error" :custom-style="{fontSize:'26rpx',width:'220rpx',height:'52rpx',borderRadius:'26rpx'}">去结算({{totalNum}})</u-button>
    </view>
  </view>
</template>

<script>
import{mapState ,mapGetters} from 'vuex'

export default {
  data(){
    return{
      btnWidth: 180,
      show:false,
      disabled:false,
      options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
    }
  },
  computed: {
           ...mapState(['cartList']) ,
           ...mapGetters(['isSelectAll','totalPrice','totalNum'])
  
        },



    methods:{
      // 商品选中事件
      handleItemCheck(index){
        const cartList = [...this.cartList]
        cartList[index].checked = !cartList[index].checked
        this.$store.commit("setCartList", cartList);
        console.log(138,this.cartList);
      },

      // 商品数量的编辑功能
      async handleNumChange(index,unit){
        // 获取想要修改元素的索引
        const cartList = [...this.cartList]
        // 当减到1时提示用户书否删除该商品
        if(this.cartList[index].num === 1 && unit === -1){
          // 弹框提示用户(调用组件，异步)
          const [err,res] = await uni.showModal({
            title:'提示',
            content:'你忍心删除吗?'
          })
          if(res.confirm){
            // 删除
            cartList.splice(index,1)
             // 将数据设置回mutation
        this.$store.commit('setCartList',cartList)
          }

        }else{
          // 点击后拿到当前商品的数量加减
        cartList[index].num +=unit
        // 将数据设置回mutation
        this.$store.commit('setCartList',cartList)
      }
        },


        // 全选影响小选
        handleSelectAll(){
          // 点击之后将全选框的状态取反
          const isSelectAll = !this.isSelectAll
          // 获取到数据
          const cartList = [...this.cartList]
          // 将全选的状态赋值给每个添加到购物车的checked(遍历)
          this.cartList.map(item=>item.checked = isSelectAll)
          this.$store.commit("setCartList", cartList);
        },
        

        // 滑动删除
        click(index, index1) {
          console.log(180,index, index1);
				if(index1 == 0) {
					this.cartList.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
          this.$store.commit('setCartList',this.cartList)
				} 
        // else {
				// 	this.cartList[index].show = false;
				// 	this.$u.toast(`收藏成功`);
				// }
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.cartList[index].show = true;
				this.cartList.map((val, idx) => {
					if(index != idx) this.cartList[idx].show = false;
				})
			},


      // 去结算
       hangdleGoPay(){
        if(this.totalNum > 0){
          // 选中过,跳转页面
          
           uni.navigateTo({url:'/pages/pay/pay'})
          
          
        }else{
          uni.showToast({
            title:'还没选择商品',
            icon:'none'
          })
        }
      }
    }
}
</script>

<style lang="scss" scoped>
.cart-list {
 

  .cart-item {
   display: flex;
   padding: 20rpx 25rpx;

    .cart-check {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
    }

    .cart-img {
     flex: 2;
     display: flex;
     justify-content: center;
     align-items: center;
    }
.title-wrap{
   .cart-info {
      flex: 3;
      margin-left: 10rpx;
      margin-right: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .cart-info-name{
        margin-bottom: 20rpx;
      }
      .cart-info-tool {
        display: flex;
        justify-content: space-between;
        .cart-info-tool-price {
        color: $themeColor;
        }

        .cart-info-tool-count {
          display: flex;
          color: #666;
          .btn {
            width: 32rpx;
            height: 32rpx;
            border: 1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
          }

          .count {
                margin: 0 20rpx;
          }
        }
      }
    }
}
   
  }
}


// 统计栏样式
.statistics {
 height: 83rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #ccc;
  display: flex;
  padding: 0 10rpx;
  align-items: center;
  .all-chk {
  padding: 0 10rpx;
  }

  .total {
    flex: 1;
    .rmb {
color: $themeColor;
      font-size: 20rpx;
    }

   
    .price {
color: $themeColor;
    }
  }
}
</style>